import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:series_play/comm/base/base_state.dart';
import 'package:series_play/widget/app_tab.dart';
import 'package:waterfall_flow/waterfall_flow.dart';

import '../../widget/app_color.dart';
import '../../widget/app_refresh_view.dart';
import '../../widget/app_text.dart';
import 'controller/home_category_controller.dart';

class HomeCategoryPage extends StatefulWidget {
  const HomeCategoryPage({super.key});

  @override
  State<HomeCategoryPage> createState() => _HomeCategoryPageState();
}

class _HomeCategoryPageState
    extends BaseControllerState<HomeCategoryPage, HomeCategoryController>
    with TickerProviderStateMixin {
  final List<String> sexTabs = ['全部', '男频', '女频'];
  final List<String> seriesTypeTabs = [
    '全部',
    '爽剧',
    '逆袭',
    '复仇',
    '虐恋',
    '甜宠',
    '武侠',
    '历史',
    '科幻',
  ];
  final List<String> timeTabs = ['全部', '最新'];

  late TabController _tabSexController;
  late TabController _tabSeriesTypeController;
  late TabController _tabTimeController;

  @override
  void initState() {
    super.initState();
    _tabSexController = TabController(length: sexTabs.length, vsync: this);
    _tabSeriesTypeController = TabController(
      length: seriesTypeTabs.length,
      vsync: this,
    );
    _tabTimeController = TabController(length: timeTabs.length, vsync: this);
    mController.onRefresh();
  }

  @override
  Widget buildPage(BuildContext context) {
    final itemWidth = (MediaQuery.of(context).size.width - 18.w * 2 - 20.w) / 3;
    final imgHeight = itemWidth * 5 / 4;
    final child = AppRefreshGridView(
      listController: mController,
      padding: const EdgeInsets.symmetric(horizontal: 18).w,
      itemCount: mController.dataList.length,
      crossAxisCount: 3,
      crossAxisSpacing: 10.w,
      mainAxisSpacing: 10.w,
      itemBuilder: (context, index) {
        return Column(
          children: [
            Container(
              width: itemWidth,
              height: imgHeight,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8).r,
                image: DecorationImage(
                  image: NetworkImage(mController.dataList[index]),
                  fit: BoxFit.cover,
                ),
              ),
              child: Stack(
                children: [
                  Positioned(
                    top: 2.w,
                    right: 2.w,
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4).r,
                        gradient: LinearGradient(
                          colors: [Color(0xFF5A9C13), Color(0xFF08BB8B)],
                        ),
                      ),
                      padding: const EdgeInsets.symmetric(
                        vertical: 2,
                        horizontal: 8,
                      ).w,
                      child: AppText(
                        '已看完',
                        fontSize: 11,
                        color: AppColor.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            8.verticalSpace,
            AppText(
              '盛夏芬德拉盛夏芬德拉盛夏芬德拉',
              color: AppColor.white,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        );
      },
      onRefresh: mController.onRefreshing,
      onLoad: mController.onLoadingMore,
    );
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        AppTab.category(sexTabs, _tabSexController),
        10.verticalSpace,
        AppTab.category(seriesTypeTabs, _tabSeriesTypeController),
        10.verticalSpace,
        AppTab.category(timeTabs, _tabTimeController),
        10.verticalSpace,
        Expanded(child: child),
      ],
    );
  }

  @override
  HomeCategoryController createController() {
    return HomeCategoryController();
  }

  @override
  bool hideAppbar() {
    return true;
  }

  @override
  bool get wantKeepAlive => true;

  @override
  Color getBackgroundColor() {
    return Colors.transparent;
  }

  @override
  void dispose() {
    super.dispose();
    _tabSexController.dispose();
    _tabSeriesTypeController.dispose();
    _tabTimeController.dispose();
  }
}
